{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros-protocol.html" import callout_compact, split, picto with context %}

{% extends "firefox/base/base-protocol.html" %}

{% block page_title %}{{ ftl('misinformation-page-title') }}{% endblock %}
{% block page_desc %}{{ ftl('misinformation-page-desc') }}{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('protocol-callout') }}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('misinformation') }}
{% endblock %}

{% set _params = '?utm_source=mozilla.org&utm_medium=referral&utm_campaign=misinformation-page' %}

{% block content %}

{% call split(
  image=resp_img('img/firefox/more/misinformation/hero.jpg',
    srcset={ 'img/firefox/more/misinformation/hero-high-res.jpg': '2x' },
    optional_attributes={ 'class': 'mzp-c-split-media-asset'}
  ),
  block_class='c-hero mzp-l-split-hide-media-on-sm-md mzp-l-split-center-on-sm-md mzp-t-split-nospace t-mobile-nospace',
  media_class='mzp-l-split-media-overflow',
  theme_class='mzp-t-dark'
) %}
  <div class="mzp-c-logo mzp-t-logo-lg mzp-t-product-firefox">{{ ftl('misinformation-brand-firefox-browser') }}</div>
  <h1 class="mzp-u-title-lg">{{ self.page_title() }}</h1>
  <p>{{ ftl('misinformation-page-subheading') }}</p>
  {{ download_firefox(dom_id='misinformation-download', download_location='primary cta') }}
{% endcall %}

<article>
  <section class="mzp-l-content mzp-t-content-md">
    <h2>{{ ftl('misinformation-what-is-heading') }}</h2>

    <p>{{ ftl('misinformation-disinformation') }}</p>
    <p>{{ ftl('misinformation-ultimately-harmful') }}</p>

    {{ resp_img(
      url='img/firefox/more/misinformation/false-info.png',
      srcset={
        'img/firefox/more/misinformation/false-info-high-res.png': '2x'
      },
      optional_attributes={
        'class': 'misinformation-article-block-img',
        'width': '688',
        'height': '375',
        'loading': 'lazy'
      }
    ) }}

    <h2>{{ ftl('misinformation-false-info-heading') }}</h2>

    <p>{{ ftl('misinformation-widespread-online', tracking='https://blog.mozilla.org/products/firefox/firefox-privacy-protections/' + _params) }}</p>
    <p>{{ ftl('misinformation-tracking-advertising') }}</p>
    <p>{{ ftl('misinformation-social-newtorks') }}</p>
  </section>

  <section class="mzp-l-content mzp-t-content-md">

    <div class="misinformation-help-details">
      <h2 class="misinformation-help-heading">{{ ftl('misinformation-spot-online-heading') }}</h2>

      <ol class="misinformation-help-steps">
        <li>
          <details>
            <summary>
              <h3>{{ ftl('misinformation-look-at-url') }}</h3>
            </summary>
            <p>{{ ftl('misinformation-known-to-br-credible') }}</p>
          </details>
        </li>
        <li>
          <details>
            <summary>
              <h3>{{ ftl('misinformation-overly-sensational') }}</h3>
            </summary>
            <p>{{ ftl('misinformation-check-out-websites') }}</p>
          </details>
        </li>
        <li>
          <details>
            <summary>
              <h3>{{ ftl('misinformation-content-up-to-date') }}</h3>
            </summary>
            <p>{{ ftl('misinformation-outdated-information') }}</p>
          </details>
        </li>
        <li>
          <details>
            <summary>
              <h3>{{ ftl('misinformation-credible-publication') }}</h3>
            </summary>
            <p>{{ ftl('misinformation-authors-name') }}</p>
          </details>
        </li>
        <li>
          <details>
            <summary>
              <h3>{{ ftl('misinformation-images-captions') }}</h3>
            </summary>
            <p>{{ ftl('misinformation-images-are-powerful') }}</p>
          </details>
        </li>
      </ol>
    </div>

  </section>

  <section class="mzp-t-content-md misinformation-firefox-helps">
    <h2 class="misinformation-firefox-helps-heading">{{ ftl('misinformation-how-firefox-helps-heading') }}</h2>

    {% call split(
      image=resp_img('img/firefox/more/misinformation/tracking-protection.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset'}),
      block_class='mzp-l-split-reversed'
    ) %}
      <h2>{{ ftl('misinformation-firefox-keeps-trackers-heading') }}</h2>
      <p>{{ ftl('misinformation-firefox-keeps-trackers-desc', firefox="https://www.firefox.com/?redirect_source=mozilla-org", protection='https://support.mozilla.org/kb/enhanced-tracking-protection-firefox-desktop' + _params) }}</p>
    {% endcall %}

    {% call split(
      image=resp_img('img/firefox/more/misinformation/facebook-container.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset'}),
      block_class='mzp-l-split-reversed'
    ) %}
      <h2>{{ ftl('misinformation-social-media-clean-heading') }}</h2>
      <p>{{ ftl('misinformation-social-media-clean-desc', container=url('firefox.facebookcontainer.index')) }}</p>
    {% endcall %}
  </section>

  <div class="misinformation-learn-more">
    <ul class="mzp-l-content mzp-l-columns mzp-t-columns-two mzp-t-picto-center">
      {% call picto(
        title=ftl('misinformation-why-trust-firefox'),
        image=resp_img(
          url='img/icons/mountain-purple.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '153',
            'loading': 'lazy'
          }
        ),
        class='trust',
        body=True,
        base_el='li'
      ) %}
        <p>
          {{ ftl('misinformation-because-we-put-people-first', foundation='https://foundation.mozilla.org/' + _params) }}
        </p>
        <p><a href="{{ url('mozorg.mission') }}">{{ ftl('misinformation-learn-more-about-our-mission') }}</a></p>
      {% endcall %}

      {% call picto(
        title=ftl('misinformation-your-privacy-by-the-product'),
        image=resp_img(
          url='img/icons/privacy-shield.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '146',
            'loading': 'lazy'
          }
        ),
        class='privacy',
        body=True,
        base_el='li',
      ) %}
        <p>{{ ftl('misinformation-firefox-products-work-differently') }}</p>
        <p><a href="{{ url('products.landing') }}">{{ ftl('misinformation-learn-about-our-products') }}</a></p>
      {% endcall %}
    </ul>
  </div>

</article>

{% call callout_compact(
  title=ftl('misinformation-designed-to-protect'),
  class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark',
  brand=True,
  brand_product='firefox',
  brand_type='logo',
  brand_size='lg',
) %}
<div class="download-firefox">
  {{ download_firefox(dom_id='misinformation-footer-download', download_location='secondary cta') }}
</div>
{% endcall %}

{% endblock %}
